@import '../../styles/variables';
@import '../../styles/mixins';

$BlogItem-dateColumnWidth: 120px;

:global {

  .BlogItem {
    width: 100%;
    position: relative;
    margin-bottom: 100px;
  }

  .BlogItem-dateColumn {
    position: absolute;
    left: 0;
    top: 0;
    width: $BlogItem-dateColumnWidth;
  }

  .BlogItem-date {
    width: 86px;
    height: 86px;
    left: 0px;
    position: absolute;
    background-image: url('https://static2.sharepointonline.com/files/fabric/fabric-website/images/blog-datebg.svg');
  }

  .BlogItem-monthPublished {
    font-size: $ms-font-size-xl;
    font-weight: 800;
    height: 27px;
    text-align: center;
    color: $color-blog-darker;
  }

  .BlogItem-dayPublished {
    color: $ms-color-white;
    font-size: $font-size-bigger;
    font-weight: 800;
    line-height: 1;
    text-align: center;
  }

  .BlogItem-year {
    font-size: $ms-font-size-m;
    text-align: center;
    font-weight: 800;
    color: $ms-color-white;
  }

  .BlogItem-contentColumn {
    max-width: 50em;
    width: 100%;
    padding-top: 60px;

    h2 {
      margin: $uhf-h2-margin;
    }
  }

  .BlogItem-title {
    font-size: $font-size-big;
  }

  .BlogItem-author {
    font-size: $ms-font-size-m;
    margin-bottom: 28px;
  }

  .BlogItem-previewDescription {
    font-size: $ms-font-size-m;
    line-height: $ms-font-size-xl;
    margin-bottom: 14px;
  }

  .BlogItem-previewDescription {
    font-size: $ms-font-size-m;
  }

  @media screen and (min-width: $uhf-screen-min-mobile) {
    // Place date to left instead of on top
    .BlogItem-contentColumn {
      padding-left: $BlogItem-dateColumnWidth;
      padding-top: 0;
    }
  }
}